<template>
  <div class="hamburger-container" @click="toggleClick">
    <el-icon class="hamburger-icon" size="18" >
      <EpExpand v-if="icon === 'expand'" />
      <EpFold v-if="icon === 'fold'" />
    </el-icon>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
const toggleClick = () => {
  store.commit("app/triggerSidebarOpened");
};
const icon = computed(() => {
  return store.getters.sidebarOpened ? "fold" : "expand";
});
</script>
<style lang="scss" scoped>
.hamburger-container {
  padding: 0 16px;
  .hamburger-icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
}
</style>
